<template>
	<view class="goods-item" @click="jump" v-if="goodsDetail">
		<view class="goods-cover-wrapper">
			<image :src="goodsDetail.product_images" class="goods-cover" mode="aspectFit" />
		</view>
		<view class="goods-info-wrapper">
			<view class="goods-name">
				{{goodsDetail.name}}
			</view>
			<view class="goods-desc">
				{{goodsDetail.dec}}
			</view>
			<view class="goods-label-group">
				<!-- 		<swiper :autoplay="true" :interval="3000" :duration="1000" circular style="width: 100%;height: 100%;">
					<swiper-item v-for="item,index in labelList" :key="index" style="display: flex; align-items: center;justify-content: space-around;">
						<view class="label-item" v-for="subitem,subindex in item" :key="subindex" :style="{'border-color':getArrayItemByIndex(colorList,(subindex+1)*index+subindex),'color':getArrayItemByIndex(colorList,(subindex+1)*index+subindex)}">
							{{subitem}}
						</view>
					</swiper-item>
				</swiper> -->
				<view class="label-group-wrapper"
				v-if="goodsDetail.label_name"
					:style="{'animation-duration': goodsDetail.label_name.split(',').length*2+'s'}">
					<view class="label-item" v-for="item,index in goodsDetail.label_name.split(',')"
						:style="{'border-color':getArrayItemByIndex(colorList,index),'color':getArrayItemByIndex(colorList,index)}">
						{{item}}
					</view>
				</view>

			</view>
			<view class="goods-price-wrapper">
				<view class="goods-price">
					￥{{goodsDetail.retail_price}}
				</view>
				<view class="goods-inventory">
					库存:{{goodsDetail.inventory>999?`999+`:goodsDetail.inventory}}
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineProps, computed, watch } from 'vue';

	interface Iprops {
		goodsDetail : IGoods | null,
	}

	const props = withDefaults(defineProps<Iprops>(), {
		goodsDetail: null,
	})


	// watch(() => props.goodsDetail, (n, o) => {
	// 	if (n && n.product_images.length) {
	// 		uni.getImageInfo({
	// 			src:n.product_images,
	// 			success:(res)=>{
	// 				console.log(res)
	// 			}
	// 		})
	// 	}
	// }, {
	// 	immediate: true,
	// })

	const jump = () => {
		uni.router.route({
			url: '/pages_mall/goods_detail/goodsDetail',
			params: {
				id: props.goodsDetail!.id,
			}
		});
	}

	const colorList : string[] = ['#CD8C37', '#365FFF', '#e45656', '#53c21d', '#3c9cff'];



	const labelList = computed(() => {
		const labels : string[] | undefined = props.goodsDetail?.label_name.split(',');
		if (labels) {
			const loop_count = Math.ceil(labels.length / 2);
			const filterList : Array<string[]> = [];
			for (let i = 0; i < loop_count; i++) {
				const temp = [];
				temp.push(labels[i * 2]);
				if (labels[(i * 2) + 1]) {
					temp.push(labels[(i * 2) + 1])
				}
				filterList.push(temp);
			}
			return filterList
		} else {
			return []
		}

	})




	function getArrayItemByIndex<T>(arr : T[], index : number) : T {
		return arr[index > arr.length - 1 ? index % arr.length : index];
	}
</script>

<style scoped lang="scss">
	@import "./goodsItem.scss";
</style>